<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<div class="module-container">
  <div class="aui-header-1 link-block">
    <lv-group lvGutter="8px" (click)="gotoAirGap($event)">
      <h2 class="home-module-title">Air Gap</h2>
    </lv-group>
  </div>
  <ng-container *ngIf="total>0 else emptyTpl">
<div class="air-gap-list-container">
  <table class="home-air-gap-list">
    <ng-container *ngFor="let item of dataList">
      <tr class="air-gap-list-row">
        <td class="link-block">
          <lv-group [lvColumns]="['40px', 'auto', '150px']" lvGutter="8px" (click)="gotoAirGap($event, item)">
            <lv-group class="home-air-gap-icon-container">
              <div [attr.class]="
                  item.policyStatus === 'enable'
                    ? 'air-gap-status-icon-inline'
                    : 'air-gap-status-icon-offline'
                "></div>
            </lv-group>
            <lv-group class="home-air-gap-name-container" lvDirection='vertical'>
                <div class="air-gap-name-value" lv-overflow>{{ item.name }}</div>
                <div class="air-gap-name-label">
                  {{ 'protection_equipment_name_label' | i18n }}
                </div>
            </lv-group>
            <lv-group class="home-air-gap-status-container" lvDirection='vertical'>
                <lv-pro-status [value]="item.replicationLinkStatus" [config]="statusConfig"></lv-pro-status>
                <div class="air-gap-status-sub-title">
                  {{ 'common_replication_link_status_label' | i18n }}
                </div>
            </lv-group>
          </lv-group>
        </td>
      </tr>
    </ng-container>
  </table>
</div>
  </ng-container>
</div>
<ng-template #emptyTpl>
  <lv-group lvDirection="vertical" lvGutter="2px" class="no-config-container link-block" (click)="gotoStorageDevice($event, item)">
    <div class="air-gap-no-config"></div>
    <lv-group lvGutter="4px">
      <span>{{'protection_cyber_airgap_no_config_warn_label'|i18n}}</span>
      <i lv-icon="aui-icon-help" lv-tooltip="{{'explore_airgap_storage_device_tip_label' | i18n}}" lvTooltipPosition="leftTop"
        lvTooltipTheme="light" lvColorState='true'></i>
    </lv-group>
  </lv-group>
</ng-template>
